<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习 - 单词学习应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div class="app-container">
        <div class="statusbar"></div>
        
        <div class="app-content">
            <!-- 学习头部 -->
            <div class="flex justify-between items-center mb-6">
                <div>
                    <a href="wordbooks.html" class="inline-flex items-center text-gray-600">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span>雅思核心词汇</span>
                    </a>
                    <div class="flex items-center mt-1">
                        <span class="badge badge-primary mr-2">进阶</span>
                        <span class="text-sm text-gray-500">第12课时</span>
                    </div>
                </div>
                <button id="theme-toggle" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
            
            <!-- 学习进度 -->
            <div class="mb-6">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-gray-600">学习进度</span>
                    <span class="text-sm font-medium">8/20 单词</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 40%"></div>
                </div>
            </div>
            
            <!-- 学习卡片 -->
            <div class="swiper-container relative">
                <!-- 实际上这里会有轮播功能，但在原型中使用静态卡片展示 -->
                <div class="word-card mb-6 slide-up">
                    <div class="flex justify-between items-center mb-3">
                        <span class="badge badge-primary">高级</span>
                        <div class="flex space-x-4">
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-bookmark"></i>
                            </button>
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-volume-up text-lg"></i>
                            </button>
                        </div>
                    </div>
                    
                    <h2 class="word-term">ephemeral</h2>
                    <div class="word-phonetic">/ɪˈfem.ər.əl/</div>
                    
                    <div class="mt-6">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="text-gray-700 font-medium">定义</h3>
                            <button class="text-xs text-blue-500 flex items-center">
                                <i class="fas fa-exchange-alt mr-1"></i>
                                <span>显示中文</span>
                            </button>
                        </div>
                        <div class="word-definition">
                            lasting for a very short time
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <h3 class="text-gray-700 font-medium mb-2">例句</h3>
                        <div class="word-example mb-2">
                            Fashion is ephemeral.
                        </div>
                        <div class="word-example">
                            The ephemeral nature of fame.
                        </div>
                    </div>
                    
                    <div class="mt-6">
                        <h3 class="text-gray-700 font-medium mb-2">记忆提示</h3>
                        <p class="text-gray-600 text-sm">
                            源自希腊语"ephemeros"（意为"短暂的、一天的"），可以联想"ephemeral"和"fmr"（for mere）表示"仅仅只是一下子"的感觉。
                        </p>
                    </div>
                </div>
                
                <!-- 学习控制按钮 -->
                <div class="flex justify-between items-center mt-6">
                    <button class="w-14 h-14 rounded-full bg-gray-200 flex items-center justify-center text-gray-700">
                        <i class="fas fa-arrow-left text-lg"></i>
                    </button>
                    
                    <div class="flex space-x-3">
                        <button class="btn btn-secondary px-5 py-3 flex items-center">
                            <i class="fas fa-times mr-2"></i>
                            <span>不认识</span>
                        </button>
                        <button class="btn btn-primary px-5 py-3 flex items-center">
                            <i class="fas fa-check mr-2"></i>
                            <span>认识</span>
                        </button>
                    </div>
                    
                    <button class="w-14 h-14 rounded-full bg-gray-200 flex items-center justify-center text-gray-700">
                        <i class="fas fa-arrow-right text-lg"></i>
                    </button>
                </div>
            </div>
            
            <!-- 单词列表 -->
            <div class="mt-10">
                <h3 class="text-lg font-semibold mb-4">本课时单词列表</h3>
                
                <div class="space-y-2">
                    <div class="card p-3 flex justify-between items-center">
                        <div>
                            <h4 class="font-medium">serendipity</h4>
                            <p class="text-xs text-gray-500">/ˌser.ənˈdɪp.ə.ti/</p>
                        </div>
                        <div class="flex items-center">
                            <span class="badge mr-3">已学</span>
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="card p-3 flex justify-between items-center bg-blue-50">
                        <div>
                            <h4 class="font-medium">ephemeral</h4>
                            <p class="text-xs text-gray-500">/ɪˈfem.ər.əl/</p>
                        </div>
                        <div class="flex items-center">
                            <span class="badge badge-primary mr-3">当前</span>
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="card p-3 flex justify-between items-center">
                        <div>
                            <h4 class="font-medium">ubiquitous</h4>
                            <p class="text-xs text-gray-500">/juːˈbɪk.wɪ.təs/</p>
                        </div>
                        <div class="flex items-center">
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="card p-3 flex justify-between items-center">
                        <div>
                            <h4 class="font-medium">pragmatic</h4>
                            <p class="text-xs text-gray-500">/præɡˈmæt.ɪk/</p>
                        </div>
                        <div class="flex items-center">
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="card p-3 flex justify-between items-center">
                        <div>
                            <h4 class="font-medium">resilience</h4>
                            <p class="text-xs text-gray-500">/rɪˈzɪl.i.əns/</p>
                        </div>
                        <div class="flex items-center">
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="navbar"></div>
    </div>
    
    <script src="../js/main.js"></script>
</body>
</html> 